{% extends 'main_hub/base.html' %}
{% block title %}
    首页
{% endblock %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="/static/css/lunbo.css">
{% endblock %}


{% block content %}
    {#    主页#}
    <div class="container">
        <br>
        <div class="slide-box " style="margin-top: 100px">
        <div class="banner-box"></div>
        <button class="slide-left-btn material-icons">arrow_back_ios</button>
        <button class="slide-right-btn material-icons">arrow_forward_ios</button>
        <div class="pagination-box"></div>
    </div>
        <hr>
        <div class="row" style="margin-top: 20px">
            {% for video in desc_date_video %}
                <div style="margin: 10px">
                    <div class="card" style="width:12rem;">
                        <a href="{% url 'video_detail' video.id %}?video_sub_number=1">
                            <img class="card-img-top" src="{{ MEDIA_URL }}{{ video.image }}"
                                 style="width: 12rem">
                        </a>
                        <div class="card-body">
                            <h5 class="card-title info">
                                <a href="{% url 'video_detail' video.id %}?video_sub_number=1"
                                   style="text-decoration:none;color:black;font-size: 15px;font-weight: bold">
                                    {% if video.name|length > 8 %}
                                        {{ video.name|slice:'0:8' }}...
                                    {% else %}
                                        {{ video.name }}
                                    {% endif %}</a>
                            </h5>
                            <p class="card-text">
                                {% if video.info|length > 9 %}
                                    {{ video.info|slice:'0:8' }}...
                                {% else %}
                                    {{ video.info }}
                                {% endif %}</p>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    <!-- 主页 视频推荐 -->
    <div class="container">
        <hr>
        <div class="row">
            {% for video in all_user_video %}
                <div style="margin: 10px">
                    <div class="card" style="width:12rem;">
                        <a href="{% url 'video_detail' video.id %}?video_sub_number=1">
                            <img class="card-img-top" src="{{ MEDIA_URL }}{{ video.image }}" style="width: 12rem">
                        </a>
                        <div class="card-body">
                            <h5 class="card-title info">
                                <a href="{% url 'video_detail' video.id %}?video_sub_number=1"
                                   style="text-decoration:none;color:black;font-size: 15px;font-weight: bold">
                                    {% if video.name|length > 8 %}
                                        {{ video.name|slice:'0:8' }}...
                                    {% else %}
                                        {{ video.name }}
                                    {% endif %}</a>
                            </h5>
                            <p class="card-text">
                                {% if video.info|length > 9 %}
                                    {{ video.info|slice:'0:8' }}...
                                {% else %}
                                    {{ video.info }}
                                {% endif %}</p>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block custom_jss %}
    <script>
        //轮播图类
        class Slide {
            constructor() {
                this.slideBoxDOM = document.querySelector('.slide-box');
                this.slideLeftBtnDOM = this.slideBoxDOM.querySelector(".slide-left-btn");
                this.slideRightBtnDOM = this.slideBoxDOM.querySelector(".slide-right-btn");
                this.bannerBoxDOM = this.slideBoxDOM.querySelector(".banner-box");
                this.paginationBoxDOM = this.slideBoxDOM.querySelector(".pagination-box");

                // 计数器
                this._currentIndex = 0;
                this._bannerItemDOMs = null;
                // bannerItemDOMs length
                this._bannerItemDOMsLen = 0;

                // 图片对象数据
                this.banners = [
                    {% for video in good_videos %}
                        {
                            imageName: '{{ video.image }}',
                            videoUrl: '{{ video.id }}',
                        },
                    {% endfor %}
                    //可以继续增加图片
                ];
                this.imageUrl = '{{ MEDIA_URL }}';
                //定时器
                this.timer = null;
            };

            get currentIndex() {
                return this._currentIndex;
            }

            //用来监听计数器变化,根据变换来改变当前的横幅
            set currentIndex(num) {
                // 将所有横幅归初始
                Object.values(this.bannerItemDOMs).forEach((item, i) => {
                    item.classList.remove('left', 'middle', 'right');
                    item.onclick = null;
                    this.paginationBoxDOM.children[i].classList.remove('chose');
                });

                if (num < 0) {
                    // this._currentIndex = this._bannerItemDOMsLen - 1;
                    this._currentIndex = this.bannerItemDOMsLen - 1;
                    // }else if(num >= this._bannerItemDOMsLen){
                } else if (num >= this.bannerItemDOMsLen) {
                    this._currentIndex = 0;
                } else {
                    this._currentIndex = num;
                }
                this.paginationBoxDOM.children[this._currentIndex].classList.add('chose');

                if (this._currentIndex === 0) {
                    this.showCurrentBanner(this.bannerItemDOMsLen - 1, this._currentIndex, this._currentIndex + 1);
                } else if (this._currentIndex === this.bannerItemDOMsLen - 1) {
                    this.showCurrentBanner(this._currentIndex - 1, this._currentIndex, 0)
                } else {
                    this.showCurrentBanner(this._currentIndex - 1, this._currentIndex, this._currentIndex + 1);
                }
            }

            showCurrentBanner(leftIndex, mindleIndex, rightIndex) {
                this.bannerItemDOMs[leftIndex].classList.add('left');
                this.bannerItemDOMs[mindleIndex].classList.add('middle');
                this.bannerItemDOMs[rightIndex].classList.add("right");
                this.bannerItemDOMs[leftIndex].onclick = () => {
                    this._currentIndex--;
                };
                this.bannerItemDOMs[rightIndex].onclick = () => {
                    this._currentIndex++;
                }
            }


            getBannerItemDOMs() {
                // return this.slideBoxDOM.querySelector('.banner-item');
                return this.slideBoxDOM.querySelectorAll('.banner-item');
            }

            // 获取 banner-itemDOM 字符串，用来渲染 DOM
            // getBannerHTML(imageName){
            getBannerItemHTML(imageName, videoUrl) {
                return `<a href="/video/${videoUrl}"><div class="banner-item"><img src="${this.imageUrl + imageName}" style="width:18rem"></div></a>`
            }

            //渲染DOM
            drawDOM(banners) {
                this.bannerBoxDOM.innerHTML = banners.reduce((html, item) => {
                    // return html + this.getBannerHTML(item.imageName);
                    return html + this.getBannerItemHTML(item.imageName, item.videoUrl);
                }, '');
                this.banners.forEach((item, i) => {
                    const span = document.createElement('span');
                    span.addEventListener('mouseover', () => {
                        this._currentIndex = 1;
                    });
                    this.paginationBoxDOM.append(span);
                });
            }

            //启动定时器
            openTimer() {
                this.timer = setInterval(() => {
                    this.currentIndex++;
                }, 3000);
            }

            stopTimer() {
                clearInterval(this.timer);
            }

            init() {
                //初始化
                this.drawDOM(this.banners);
                this.bannerItemDOMs = this.getBannerItemDOMs();
                this.bannerItemDOMsLen = this.bannerItemDOMs.length;
                this.currentIndex = 0;


                //监听事件
                this.slideLeftBtnDOM.addEventListener('click', () => {
                    this.currentIndex--;
                })
                this.slideRightBtnDOM.addEventListener('click', () => {
                    this.currentIndex++;
                })

                //自动轮播
                this.openTimer();
                this.slideBoxDOM.addEventListener('mouseover', () => {
                    this.stopTimer();
                });
                this.slideBoxDOM.addEventListener('mouseout', () => {
                    this.openTimer();
                })
            }

        }

        new Slide().init();
    </script>
{% endblock %}